#デカルト軸

デカルトグリッドに従う軸は、「デカルト軸」として知られています。デカルト軸は、折れ線グラフ、棒グラフ、バブルチャートに使用されます。 Chart.js にはデフォルトで 4 つのデカルト軸が含まれています。

線形
対数
カテゴリー
時間
時系列

#ビジュアルコンポーネント

デカルト軸は、個別に構成できる視覚コンポーネントで構成されます。これらのコンポーネントは次のとおりです。

#国境

軸の境界線は、グラフ領域の横の軸の端に描画されます。下の画像では赤色で描かれています。

const 構成 = {
  タイプ: '行'、
  データ、
  オプション: {
    スケール: {
      バツ： {
        国境： {
          赤色'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};

#グリッド線

軸のグリッド線はグラフ領域に描画されます。下の画像では赤くなっています。

const 構成 = {
  タイプ: '行'、
  データ、
  オプション: {
    スケール: {
      バツ： {
        グリッド: {
          赤色'、
          境界線の色: 'グレー'、
          ティックカラー: 'グレー'
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};

#目盛りと目盛りマーク

目盛りは、ラベルとして表示される軸上のデータ値を表します。目盛りは、軸の境界線からラベルまでのグリッド線の延長です。この例では、目盛りマークは赤で描画され、目盛りラベルは青で描画されます。

const 構成 = {
  タイプ: '行'、
  データ、
  オプション: {
    スケール: {
      バツ： {
        グリッド: {
          ティックカラー: '赤'
        }、
        目盛り: {
          青色'、
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

#タイトル

軸のタイトルコンポーネントは、データのラベル付けに使用されます。以下の例では赤色で表示されています。

const 構成 = {
  タイプ: '行'、
  データ、
  オプション: {
    スケール: {
      バツ： {
        タイトル： {
          赤色'、
          表示: true、
          テキスト:「月」
        }
      }
    }
  }
};const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};

#共通構成

ノート

これらは、すべてのデカルト軸でサポートされる共通のオプションにすぎません。その軸で使用可能なすべてのオプションについては、特定の軸のドキュメントを参照してください。

#すべてのデカルト軸に共通のオプション

名前空間:options.scales[scaleId]

名前	タイプ	デフォルト	説明
`bounds`	`string`	`'ticks'`	スケールの境界を決定します。もっと...
`position`	`string`\|`object`		軸の位置。もっと...
`stack`	`string`		スタックグループ。同じ軸`position`同じように`stack`積み重ねられています。
`stackWeight`	`number`	1	スタックグループ内のスケールの重量。グループ内のスケールに割り当てられたスペースの量を決定するために使用されます。
`axis`	`string`		これはどのタイプの軸ですか。可能な値は次のとおりです。`'x'`、`'y'`。設定されていない場合、これは ID の最初の文字から推測されます。`'x'`また`'y'`。
`offset`	`boolean`	`false`	true の場合、余分なスペースが両端に追加され、グラフ領域に収まるように軸が拡大縮小されます。これは次のように設定されています`true`デフォルトで棒グラフの場合。
`title`	`object`		スケールタイトル構成。もっと...

#全軸共通オプション

名前空間:options.scales[scaleId]

名前	タイプ	デフォルト	説明
`type`	`string`		使用されているスケールの種類。カスタムスケールを作成し、文字列キーを使用して登録できます。これにより、グラフの軸のタイプを変更できます。
`alignToPixels`	`boolean`	`false`	ピクセル値をデバイスのピクセルに合わせます。
`backgroundColor`	`Color`		スケール領域の背景色。
`border`	`object`		境界線の構成。もっと...
`display`	`boolean`\|`string`	`true`	軸のグローバル可視性を制御します (次の場合に表示されます)。`true`、いつ隠されるか`false`）。いつ`display: 'auto'`、軸は、少なくとも 1 つの関連データセットが表示されている場合にのみ表示されます。
`grid`	`object`		グリッドラインの構成。もっと...
`min`	`number`		ユーザー定義のスケールの最小値。データの最小値をオーバーライドします。もっと...
`max`	`number`		ユーザー定義のスケールの最大値。データの最大値をオーバーライドします。もっと...
`reverse`	`boolean`	`false`	スケールを逆にします。
`stacked`	`boolean`\|`string`	`false`	データをスタックする必要があります。もっと...
`suggestedMax`	`number`		データの最大値を計算するときに使用される調整。もっと...
`suggestedMin`	`number`		最小データ値を計算するときに使用される調整。もっと...
`ticks`	`object`		設定にチェックマークを付けます。もっと...
`weight`	`number`	`0`	軸のソートに使用される重み。重みが大きいほど、チャート領域から遠くなります。

#軸位置

軸は、グラフの端、グラフ領域の中心、またはデータ値に対して動的に配置できます。

軸をチャートの端に配置するには、position次のいずれかのオプションを選択します。'top'、'left'、'bottom'、'right'。軸をグラフ領域の中心に配置するには、positionというオプション'center'。このモードでは、axisオプションを指定するか、軸 ID が文字「x」または「y」で始まる必要があります。これは、chart.js が軸の種類 (水平または垂直) を認識するためです。データ値に対して軸を配置するには、position次のようなオブジェクトのオプション:

{
    x: -20
}

これにより、ID「x」の軸上の -20 の値に軸が配置されます。デカルト軸の場合、指定できる軸は 1 つだけです。

#スケール境界

のboundsプロパティはスケール境界戦略を制御します (スケール境界戦略はバイパスされます)。min/maxオプション）。

'data': データが完全に表示され、外側のラベルが削除されていることを確認します。
'ticks': 目盛りが完全に表示されていることを確認し、外側のデータは切り捨てられます。

#ティック設定

ノート

これらは、すべてのデカルト軸でサポートされる共通の目盛オプションのみです。その軸で使用可能なすべてのオプションについては、特定の軸のドキュメントを参照してください。

#すべてのデカルト軸に共通の目盛オプション

名前空間:options.scales[scaleId].ticks

名前	タイプ	デフォルト	説明
`align`	`string`	`'center'`	軸に沿った目盛りの配置。できる`'start'`、`'center'`、`'end'`、また`'inner'`。`inner`アライメントとは整列という意味です`start`最初のティックと`end`横軸の最後のティックについて
`crossAlign`	`string`	`'near'`	軸に垂直な目盛りの配置。できる`'near'`、`'center'`、また`'far'`。見る目盛りの配置
`sampleSize`	`number`	`ticks.length`	適合するラベルの数を決定するときに調べるティックの数。小さい値を設定すると高速になりますが、ラベルの長さに大きなばらつきがある場合は精度が低くなる可能性があります。
`autoSkip`	`boolean`	`true`	true の場合、表示できるラベルの数が自動的に計算され、それに応じてラベルが非表示になります。ラベルは次まで回転します`maxRotation`スキップする前に。振り向く`autoSkip`オフにすると、何があってもすべてのラベルが表示されます。
`autoSkipPadding`	`number`	`3`	横軸の目盛り間のパディング`autoSkip`有効になっています。
`includeBounds`	`boolean`	`true`	定義されている必要があります`min`と`max`値は、「適切」ではない場合でも、ティックとして表示されます。
`labelOffset`	`number`	`0`	目盛の中心点からラベルをオフセットするピクセル単位の距離 (x 軸の場合は x 方向、y 軸の場合は y 方向)。注: これにより、端のラベルがキャンバスの端で切り取られる可能性があります。
`maxRotation`	`number`	`50`	ラベルを圧縮するために回転する場合の目盛りラベルの最大回転。注: 回転は必要になるまで行われません。注: 水平スケールにのみ適用されます。
`minRotation`	`number`	`0`	目盛ラベルの最小回転。注: 水平スケールにのみ適用されます。
`mirror`	`boolean`	`false`	軸の周囲で目盛ラベルを反転し、ラベルをグラフの外側ではなく内側に表示します。注: 垂直スケールにのみ適用されます。
`padding`	`number`	`0`	目盛りラベルと軸の間のパディング。垂直軸に設定すると、これは水平 (X) 方向にも適用されます。水平軸に設定すると、垂直 (Y) 方向にも適用されます。
`maxTicksLimit`	`number`	`11`	表示する目盛りとグリッド線の最大数。

#すべての軸に共通の目盛オプション

名前空間:options.scales[scaleId].ticks

名前	タイプ	スクリプト可能	デフォルト	説明
`backdropColor`	`Color`	はい	`'rgba(255, 255, 255, 0.75)'`	ラベルの背景の色。
`backdropPadding`	`Padding`		`2`	ラベルの背景のパディング。
`callback`	`function`			チャート上に表示されるティック値の文字列表現を返します。見る折り返し電話。
`display`	`boolean`		`true`	true の場合、目盛りラベルを表示します。
`color`	`Color`	はい	`Chart.defaults.color`	ダニの色。
`font`	`Font`	はい	`Chart.defaults.font`	見るフォント
`major`	`object`		`{}`	メジャーティックの設定。
`padding`	`number`		`3`	軸からの目盛りラベルのオフセットを設定します。
`showLabelBackdrop`	`boolean`	はい	`true`放射状スケールの場合、`false`さもないと	true の場合、目盛ラベルの後ろに背景を描画します。
`textStrokeColor`	`Color`	はい	「」	テキストの周囲のストロークの色。
`textStrokeWidth`	`number`	はい	`0`	テキストの周囲のストロークの幅。
`z`	`number`		`0`	目盛りレイヤーの Z インデックス。チャート領域に目盛りを描画する場合に便利です。値 <= 0 はデータセットの下に描画され、値 > 0 は上に描画されます。

#目盛りの配置

目盛りの配置は主に目盛り構成オブジェクトの 2 つの設定を使用して制御されます。alignとcrossAlign。のalignこの設定では、軸方向に沿ってラベルを目盛りに合わせる方法を構成します (つまり、水平軸の場合は水平、垂直軸の場合は垂直)。のcrossAlignこの設定では、ラベルを垂直方向 (つまり、水平軸の場合は垂直、垂直軸の場合は水平) で目盛に合わせる方法を構成します。以下の例では、crossAlignこの設定は、Y 軸上のラベルを左揃えに使用します。

const 構成 = {
  タイプ: 'バー'、
  データ、
  オプション: {
    インデックス軸: 'y'、
    スケール: {
      y: {
        目盛り: {
          クロスアライン: '遠い',
        }
      }
    }
  }
};const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};

ノート

のcrossAlignこの設定は、次の前提条件が満たされている場合にのみ有効です。

ティックの回転は0
軸の位置は'top'、」left'、'bottom'また'right'

#軸ID

プロパティdataset.xAxisIDまたdataset.yAxisIDに合わせなければなりませんscales財産。これは、多軸チャートを使用する場合に特に必要です。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }
        }
    }
});

#複数の軸の作成

デカルト軸を使用すると、複数の X 軸と Y 軸を作成できます。これを行うには、複数の構成オブジェクトをxAxesとyAxesプロパティ。新しい軸を追加するときは、デフォルトのタイプが次のとおりであるため、新しい軸のタイプを必ず指定することが重要です。いいえこの場合に使用されます。

以下の例では、2 つの Y 軸を作成しています。次に、yAxisIDプロパティを使用して、データセットを正しい軸にマップします。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',
            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',
            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});

←軸カテゴリ軸→